<template>
    <div class="volunteerMessage">
        <mTitle :title="title"></mTitle>
        <div class="volunteer-message-btn" @click="artsPublishShow()">留言</div>
        <scroll class="volunteer-message-container">
            <div>
                <ul class="arts-message-item" @click="hideBtnWrap">
                    <li class="arts-message-list" v-for="(item, index) in artsMessageList" :key="index" :data="artsMessageList">
                        <div class="left">
                            <img v-lazy="item.headimg" alt="" class="avatar-img" />
                        </div>
                        <div class="right">
                            <transition name="slide">
                                <div class="right-btn-wrap" v-show="index===currentIndex">
                                    <div class="btn-wrap-left" @click="likeBtn(item.id)">
                                        <i class="icon"></i>
                                        <span class="text" v-text="item.zanFlag ? '取消': '点赞'"></span>
                                    </div>
                                    <i class="btn-wrap-icon"></i>
                                    <div class="btn-wrap-right">
                                        <i class="icon"></i>
                                        <span class="text" @click="reviewBtn(item.id)">评论</span>
                                    </div>
                                </div>
                            </transition>
                            <div class="right-title">
                                <div class="right-title-left">
                                    <span class="name">{{item.nickname}}</span>
                                    <span class="time">{{item.createtime}}</span>
                                </div>
                                <div class="right-title-right" @click.stop="showBtnWrap(index)">
                                    <i class="icon"></i>
                                </div>
                            </div>
                            <div class="right-content">
                                {{item.content}}
                            </div>
                            <!-- 图片 -->
                            <div class="right-imgArr" v-show="item.pics.length" @click="showImagePreview(index)">
                                <!-- 只有一张图的情况 -->
                                <div class="right-imgArr-first" v-if="item.pics.length === 1" v-for="(list, index) in item.pics" :key="index">
                                    <img v-lazy="list" alt="" />
                                </div>
                                <!-- 多张图 -->
                                <div class="right-imgArr-list" v-if="item.pics.length > 1">
                                    <li class="imgArr-items" v-for="(list, index) in item.pics" :key="index" @click.stop="imgIndex(item.pics,index)">
                                        <div class="img">
                                            <img v-lazy="list" alt="" />
                                        </div>
                                    </li>
                                </div>
                            </div>
                            <div class="right-bottom" v-show="item.praiselist !== null || item.sublist !== null">
                                <div class="right-bottom-title" v-show="item.praiselist !== null">
                                    <i class="icon"></i>
                                    <div class="name">
                                        <span class="name-text" v-for="(name, index) in item.praiselist">{{name.nickname}}&nbsp;&nbsp;</span>
                                    </div>
                                </div>
                                <ul class="right-bottom-content">
                                    <li class="right-bottom-list" v-for="(list, index) in item.sublist">
                                        <span style="display: block;" class="name">{{list.nickname}}：<b class="text">{{list.content}}</b></span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 请求数据loading -->
            <!-- <div class="loading-wrapper" v-show="!artsMessageList.length">
                <loading></loading>
            </div> -->
            <!-- 暂无留言情况 -->
            <div class="no-message" v-show="artsMessageList === null">
                <span class="text">暂无任何留言信息</span>
            </div>
        </scroll>
        <div class="volunteer-detail-fixed">
            <router-link :to="'/volunteerDetail/' + id" replace tag="div" class="arts-detail-item">
                <i class="icon icon-item1"></i>
                <span class="text">团队介绍</span>
            </router-link>
            <router-link :to="'/volunteerActivity/' + id" replace tag="div" class="arts-detail-item">
                <i class="icon icon-item2"></i>
                <span class="text">近期活动</span>
            </router-link>
            <router-link :to="'/volunteerMessage/' + id" replace tag="div" class="arts-detail-item active">
                <i class="icon icon-item3"></i>
                <span class="text">留言</span>
            </router-link>
        </div>
        <arts-publish ref="artsPublishFlag"></arts-publish>
        <arts-discuss ref="artsDiscussFlag" :reviewIndex="reviewIndex" @submitBtn="submitBtn"></arts-discuss>
    </div>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import { ImagePreview } from 'vant'
    import ArtsPublish from './../arts-publish/artsPublish'
    import ArtsDiscuss from './../arts-discuss/artsDiscuss'

    export default {
        data () {
            return {
                title: "留言列表",
                name: "",
                artsMessageList: [],
                id: '',
                "zanText": "点赞",
                currentIndex: -1,
                reviewIndex: "-1",
                likeArr: [],
                imgArr: []
            }
        },
        methods: {
            // 点击留言
            artsPublishShow () {
                this.$refs.artsPublishFlag.show()
            },
            hideBtnWrap () {
                this.currentIndex = -1
            },
            // 控制点赞和评论
            showBtnWrap (index) {
                if (this.currentIndex === index) {
                    this.currentIndex = -1
                    return
                }
                this.currentIndex = index
            },
            // 点赞
            likeBtn (index) {
                for (var i=0;i<this.artsMessageList.length;i++) {
                    if (index === this.artsMessageList[i].id) {
                       if (this.artsMessageList[i].zanFlag === 1) {
                            var _this = this
                            let _i = i
                            // 取消点赞
                            axios.post('/api/index.php?g=Api&m=Ucenter&a=qxpraisetliuyan', {
                                openid: localStorage.getItem("openid"),
                                mid: localStorage.getItem("memberid"),
                                mesid: index
                            }).then((res) => {
                                if (res.data.rescode=='0000') {
                                    _this.artsMessageList[_i].zanFlag = 0
                                    for (var j=0;j<_this.artsMessageList[_i].praiselist.length;j++) {
                                        if (_this.artsMessageList[_i].praiselist[j].memberid === localStorage.getItem("memberid")) {
                                            _this.artsMessageList[_i].praiselist.remove(_this.artsMessageList[_i].praiselist[j])
                                            if (_this.artsMessageList[_i].praiselist.length === 0) {
                                                _this.artsMessageList[_i].praiselist = null
                                            }
                                        }
                                    }
                                }
                            }).catch(function (error) {

                            })
                       } else {
                            var _this = this
                            let _i = i
                            // 点赞
                            axios.post('/api/index.php?g=Api&m=Ucenter&a=praisetliuyan', {
                                openid: localStorage.getItem("openid"),
                                mid: localStorage.getItem("memberid"),
                                mesid: index
                            }).then((res) => {
                                if (res.data.rescode=='0000') {
                                    _this.artsMessageList[_i].zanFlag = 1
                                    let nameArr = [{"nickname": '我',memberid: localStorage.getItem("memberid")}]
                                    let nameObj = {"nickname": '我',memberid: localStorage.getItem("memberid")}
                                    if (_this.artsMessageList[_i].praiselist === null) {
                                        _this.artsMessageList[_i].praiselist = nameArr
                                    } else {
                                        _this.artsMessageList[_i].praiselist.push(nameObj)
                                    }
                                }
                            }).catch(function (error) {

                            })
                       }
                    }
                }
                this.currentIndex = -1
            },
            reviewBtn (index) {
                this.currentIndex =-1
                this.inputFlag = true
                this.reviewIndex = index
                this.$refs.artsDiscussFlag.show()
            },
            submitBtn (text) {
                // console.log(this.reviewIndex)
                // console.log(text)
                // let arr = this.artsMessageList[this.reviewIndex].messageArr
                // arr.push({name:this.name,text:text})
                // console.log(this.artsMessageList[this.reviewIndex])
                // for (var i=0;i<this.artsMessageList.length;i++) {
                //     if (this.reviewIndex === this.artsMessageList[i].id) {
                //         let nameArr = [{"nickname": '我',text: text}]
                //         console.log(this.artsMessageList[i].sublist.push(nameArr))
                //         this.artsMessageList[i].sublist.push(nameArr)
                //     }
                // }
            },
            // 图片预览
            showImagePreview (index) {
                this.imgArr = this.artsMessageList[index].pics
                const instance = ImagePreview(this.imgArr, typeof position === 'number' ? position : 0);
            },
            // 点击图片的索引
            imgIndex (list,number) {
                const instance = ImagePreview(list, number)
            },
            // 获取数据
            getArtsMessageInfo () {
                axios.post('/api/index.php?g=Api&m=Ucenter&a=tliuyanlist', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    teamid: this.$route.params.id
                }).then((res) => {
                    if (res.data.rescode=='0000') {
                        this.artsMessageList = res.data.data.list
                    }
                }).catch(function (error) {

                })
            }
        },
        components: {mTitle,Scroll,Loading,ArtsPublish,ArtsDiscuss},
        created () {
            this.id = this.$route.params.id
            this.getArtsMessageInfo()
            // 删除数组指定元素
            Array.prototype.indexOf = function(val) {
                    for (var i = 0; i < this.length; i++) {
                        if (this[i] == val) return i
                    }
                    return -1
                }
            Array.prototype.remove = function(val) {
                var index = this.indexOf(val)
                if (index > -1) {
                    this.splice(index, 1)
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .volunteerMessage
        width: 100%
        height: 100%
        position: relative
        overflow: hidden
        .volunteer-message-btn
            position: absolute
            width: 75px
            height: 24px
            background: #f8624a
            color: #fff
            border-radius: 20px
            top: 9px
            text-align: center
            right: 15px
            line-height: 24px
        .message-input-form
                position: fixed
                bottom: 0
                height: 45px
                z-index: 11
                left: 0
                width: 100%
                background: #ccc
                display: flex
                .input-div
                    flex: 1
                    height: 45px
                    background: #ccc
                    .input-message
                        height: 35px
                        width: 90%
                        background: #fff
                        display: block
                        margin: 5px auto
                        border-radius: 6px 
                        padding: 0 6px
                        box-sizing: border-box
                .input-message-btn
                    width: 80px
                    flex: 0 0 80px
                    text-align: center
                    line-height: 45px
                    color: #fff
                    background: #0094d4
        .volunteer-message-container
            position: absolute
            top: 44px
            bottom: 44px
            width: 100%
            overflow: hidden
            padding: 0 15px
            box-sizing: border-box
            .no-message
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
                text-align: center
                left: 0
                right: 0
                .text
                    font-size: 18px
                    color: #0094d3
            .loading-wrapper
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
            .arts-message-item
                width: 100%
                .arts-message-list
                    width: 100%
                    display: flex
                    overflow: hidden
                    position: relative
                    padding-top: 10px
                    padding-bottom: 10px
                    .left
                        flex: 0 0 65px
                        width: 65px
                        .avatar-img
                            width: 65px
                            height: 65px
                            border-radius: 50%
                    .right
                        flex: 1
                        margin: 0 12px
                        width: 100%
                        overflow: hidden
                        position: relative
                        .right-btn-wrap
                            position: absolute
                            width: 120px
                            height: 27px
                            background: #353535
                            border-radius: 4px
                            right: 38px
                            padding: 0 6px
                            box-sizing: border-box
                            color: #fff
                            font-size: 0
                            transition: all .1s linear
                            &.slide-enter-active,&.slide-leave-active
                                width: 120px
                            &.slide-enter,&.slide-leave-to
                                width: 0 
                            .btn-wrap-icon
                                position: absolute
                                width: 1px
                                height: 16px
                                background: #fff
                                top: 5px
                                left: 49%
                            .btn-wrap-left
                                width: 50%
                                height: 27px
                                display: inline-block
                                text-align: center
                                line-height: 27px
                                .icon
                                    background: url('./icon3.png') no-repeat
                                    width: 12px
                                    height: 12px
                                    background-size: 100% 100%
                                    display: inline-block
                                    vertical-align: middle
                                .text
                                    display: inline-block
                                    vertical-align: middle
                                    font-size: 12px
                                    color: #fff
                                    margin-left: 4px
                            .btn-wrap-right
                                width: 50%
                                height: 27px
                                display: inline-block
                                text-align: center
                                line-height: 27px
                                .icon
                                    background: url('./icon4.png') no-repeat
                                    width: 12px
                                    height: 12px
                                    background-size: 100% 100%
                                    display: inline-block
                                    vertical-align: middle
                                .text
                                    display: inline-block
                                    vertical-align: middle
                                    font-size: 12px
                                    color: #fff
                                    margin-left: 4px
                        .right-title
                            display: flex
                            .right-title-left
                                flex: 1
                                .name
                                    font-size: 14px
                                    color: #000
                                .time
                                    font-size: 10px
                                    color: #888
                                    display: block
                                    margin-top: 6px
                            .right-title-right
                                width: 30px
                                flex: 0 0 30px
                                .icon
                                    background: url('./icon1.png') no-repeat
                                    width: 27px
                                    height: 17px
                                    background-size: 100% 100%
                                    display: inline-block
                        .right-content
                            margin-top: 8px
                            font-size: 12px
                            line-height: 150%
                            text-align: justify
                        .right-imgArr
                            margin-top: 6px
                            width: 100%
                            position: relative
                            overflow: hidden
                            .right-imgArr-first
                                width: 100%
                                overflow: hidden
                                img
                                    width: 30%
                            .right-imgArr-list
                                width: 100%
                                overflow: hidden
                                .imgArr-items
                                    width: 30%
                                    float: left
                                    position: relative
                                    margin-right: 3%
                                    margin-bottom: 4px
                                    .img
                                        position: relative
                                        width: 100%
                                        height: 0
                                        padding-top: 100%
                                        img
                                            position: absolute
                                            top: 0
                                            left: 0
                                            width: 100%
                                            height: 100%
                        .right-bottom
                            margin-top: 6px
                            width: 100%
                            padding: 0 10px
                            box-sizing: border-box
                            background: #efeff4
                            .right-bottom-title
                                width: 100%
                                padding-top: 6px
                                padding-bottom: 4px
                                box-sizing: border-box
                                border-bottom: 1px solid #e0dfe6
                                display: flex
                                .icon
                                    background: url('./icon2.png') no-repeat
                                    width: 12px
                                    height: 12px
                                    background-size: 100% 100%
                                    display: inline-block
                                    flex: 0 0 12px
                                .name
                                    flex: 1
                                    display: inline-block
                                    font-size: 12px
                                    color: #0094d4
                                    margin-left: 5px
                                    line-height: 130%
                            .right-bottom-content
                                width: 100%
                                padding-top: 6px
                                overflow: hidden
                                .right-bottom-list
                                    font-size: 0
                                    margin-bottom: 6px
                                    .name
                                        display: inline-block
                                        font-size: 12px
                                        color: #0094d4
                                        line-height: 120%
                                        .text
                                            font-weight: 100
                                            color: #000
        .volunteer-detail-fixed
            position: fixed
            height: 44px
            bottom: 0
            left: 0
            width: 100%
            align-items: center
            border-top: 1px solid rgba(7,17,27,.3)
            background: #fff
            display: flex
            .arts-detail-item
                flex: 1
                text-align: center
                &.active
                    .icon-item1
                        background: url('./icon8-active.png') no-repeat
                        background-size: 100% 100%
                    .text
                        color: #0094D3
                    .icon-item2
                        background: url('./icon9-active.png') no-repeat !important
                        background-size: 100% 100% !important
                    .icon-item3
                        background: url('./icon10-active.png') no-repeat !important
                        background-size: 100% 100% !important
                .icon
                    margin: 0 auto
                    display: block
                    &.icon-item1
                        background: url('./icon8.png') no-repeat
                        width: 20px
                        height: 21px
                        background-size: 100% 100%
                    &.icon-item2
                        background: url('./icon9.png') no-repeat
                        width: 20px
                        height: 20px
                        background-size: 100% 100%
                    &.icon-item3
                        background: url('./icon10.png') no-repeat
                        width: 20px
                        height: 20px
                        background-size: 100% 100%
                .text
                    color: #a1a1a1
                    font-size: 12px
                    margin-top: 4px              
</style>